<!--
 * @Author: wangming
 * @Date: 2021-04-23 15:25:10
 * @LastEditors: wangming
 * @LastEditTime: 2021-04-23 16:10:55
 * @Description: file content
-->
<template>
  <el-form
    ref="form"
    class="p60"
    label-width="100px"
    :rules="rules"
    :model="ruleForm"
  >
    <el-form-item :label="$t('sys.old_password')" prop="oldPassword">
      <el-input
        type="password"
        show-password
        v-model="ruleForm.oldPassword"
        :placeholder="$t('sys.please_enter')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="$t('sys.new_password')" prop="newPassword">
      <el-input
        type="password"
        show-password
        v-model="ruleForm.newPassword"
        :placeholder="$t('sys.please_enter')"
      ></el-input
    ></el-form-item>
    <el-form-item :label="$t('sys.confirm_password')" prop="confirmPassword">
      <el-input
        type="password"
        show-password
        v-model="ruleForm.confirmPassword"
        :placeholder="$t('sys.please_enter')"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" :loading="loading"
        >{{$t('sys.update_now')}}</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import i18n from '../../../i18n'
import { putHmuserChangePwd } from '@/apis/paas/HmUserController.js'
import md5 from "md5";
import { mapGetters } from "vuex"
import { PASSWORD_COMPLEX_REG,PASSWORD_COMPLEX_REG_MSG_I18N } from '@/utils/reg'
export default {
  data() {
    return {
      loading: false,
      ruleForm: {},
      rules: {
        oldPassword: [
          { required: true, message: i18n.t("sys.enter_old_password"), trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: i18n.t("sys.enter_new_password"), trigger: "blur" },
          {
            trigger: "change",
            validator: (rule, value, callback) => {
              if( this.pwdCheck && !value.match(PASSWORD_COMPLEX_REG) ) {
                callback(new Error(i18n.t('sys.'+PASSWORD_COMPLEX_REG_MSG_I18N)));
              }else{
                callback();
              }
            },
          },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (
                value !== this.ruleForm.confirmPassword &&
                !!this.ruleForm.confirmPassword
              ) {
                callback(new Error(i18n.t("sys.two_passwords_inconsistent")));
              } else if(  this.pwdCheck && !value.match(PASSWORD_COMPLEX_REG)) {
                callback(new Error(i18n.t('sys.'+PASSWORD_COMPLEX_REG_MSG_I18N)));
              }else{
                callback();
              }
            },
          }
        ],
        confirmPassword: [
          { required: true, message: i18n.t("sys.enter_confirm_password"), trigger: "blur" },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (
                value !== this.ruleForm.newPassword &&
                !!this.ruleForm.newPassword
              ) {
                callback(new Error(i18n.t("sys.two_passwords_inconsistent")));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  computed:{
    ...mapGetters(["APP_INFO"]),
    pwdCheck() {
      return this.APP_INFO.pwdCheck || false;
    },
  },
  methods: {
    async onSubmit() {
      this.loading = true;
      try {
        await this.$refs.form.validate();
        let { confirmPassword, newPassword, oldPassword } = this.ruleForm;
        await putHmuserChangePwd({
          confirmPassword: md5(confirmPassword),
          newPassword: md5(newPassword),
          oldPassword: md5(oldPassword),
        });
        this.$message.success(this.$t("sys.modification_succeeded_login_again"));
        this.$router.push("/");
      } catch (error) {}
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
